<template>
  <yy-paging
    v-model="dataList"
    @query="queryList"
    ref="paging"
    :auto="automatic"
    @scroll="scroll"
    :refresher-enabled="false"
  >
    <template #top>
      <u-navbar
        back-text=""
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="pageReturn">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"> 提现 </view>
          </view>
          <view class="flex col-span-1 justify-end" @click="vk.navigateTo('/pages/my/walletDetails')">
            <view class="text-[.875rem] text-[#5C6068]">明细 </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="flex flex-col gap-3 p-4">
      <view class="bg-[#FFFFFF] rounded-[.5rem] px-4 py-2 flex items-center gap-3">
        <view class="text-[.8125rem] text-[#161A24] flex-1 line-clamp-1">
          将提现至支付宝账号：{{ d.accounts || '未绑定' }}
        </view>
      </view>
      <view class="p-4 bg-white shadow-[0rem_.125rem_1rem_0rem_rgba(0,0,0,0.03)] rounded-[1rem] flex flex-col gap-4">
        <view class="text-[.875rem] text-[#2B2E3B]"> 提现金额(元)</view>
        <view class="flex gap-1 items-center">
          <view class="text-[1rem] text-[#2B2E3B] font-black"> ¥ </view>
          <input
            type="digit"
            class="flex-1 text-[2rem] text-[#161A24]"
            v-model="amount"
            placeholder="请输入提现金额(元)"
            placeholder-class="dddds"
            maxlength="5"
            @blur="limitAmount"
          />
        </view>
        <view class="flex gap-1 items-center">
          <view class="text-[.875rem] text-[#9B9EA9]"> 当前可提现(元) </view>
          <view class="text-[.875rem] text-[#2B2E3B]"> {{ data.normal_amount }} </view>
          <view class="text-[.8125rem] text-[#00A9AB] font-medium ml-2" @click="amount = data.normal_amount">
            全部提现
          </view>
        </view>
        <view class="border-t border-solid border-[#ECECEC]"></view>
        <view
          class="w-full h-[2.75rem] bg-[#00A9AB] rounded-full flex justify-center items-center btn"
          @click="withdrawal"
        >
          <view class="text-[1rem] text-[#FFFFFF] font-bold"> 提现</view>
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false,
        amount: '',
        d: {},
        data: {}
      }
    },
    async onLoad(options) {
      this.getWithdrawalAccount()
      this.wallet()
    },

    methods: {
      limitAmount() {
        if (!this.amount) return
        if (isNaN(Number(this.amount))) {
          this.amount = ''
          return
        }
        // 限制金额范围在0.01-99999之间
        if (Number(this.amount) < 0.01) {
          this.amount = '0.01'
        } else if (Number(this.amount) > 99999) {
          this.amount = '99999'
        }
        // 限制最多两位小数
        if (!/^\d+(\.\d{0,2})?$/.test(this.amount)) {
          this.amount = Number(this.amount).toFixed(2)
        }
      },
      pageReturn() {
        vk.navigateBack()
      },

      async withdrawal() {
        vk.pubfn.debounce(async () => {
          if (!this.amount) return vk.toast('请输入提现金额', 'none')
          if (Number(this.amount) < 0.01) return vk.toast('提现金额不能小于0.01元', 'none')
          if (Number(this.amount) > 99999) return vk.toast('提现金额不能大于99999元', 'none')
          if (!/^\d+(\.\d{0,2})?$/.test(this.amount)) return vk.toast('请输入正确的金额格式，最多支持两位小数', 'none')
          if (Number(this.amount) > Number(this.data.normal_amount))
            return vk.toast('提现金额不能大于可提现金额', 'none')

          let res = await api.applyWithdrawal({
            money: this.amount
          })
          if (res.code == 0) return vk.toast(res.msg)
          vk.toast(res.msg, 200, e => {
            const eventChannel = this.getOpenerEventChannel()
            if (eventChannel.emit) eventChannel.emit('update')
            vk.navigateBack()
          })
        }, 500)
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([''])
      },
      async getWithdrawalAccount() {
        let res = await api.getWithdrawalAccount()
        this.d = res.data
      },
      async wallet() {
        const res = await api.wallet()
        this.data = res.data
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .dddds {
    font-weight: 400;
    font-size: 16px;
    color: #c0c4cc;
  }
</style>
